<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <!------省市区的三级联动-----!-->
        <div class="layui-form-item">
            <label class="layui-form-label">省</label>
            <div class="layui-input-block">
                <select name="province" lay-verify="required"  id="province" lay-filter="province"  data-select="{:url('jizhan.store/getProvince')}" data-fields="city_id,name" data-value="{$row.province|default=''}" lay-search="">
                    <option value="">请选择省</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">市</label>
            <div class="layui-input-block" id="shi">
                <select name="city" id="city" lay-filter="city" lay-search="" lay-verify="required" value="{$row.city|default=''}">
                    <option value="">请选择市</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">区</label>
            <div class="layui-input-block" id="qu">
                <select name="district" id="district" lay-filter="district" lay-search="" lay-verify="required" value="{$row.district|default=''}">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
        <!------省市区的三级联动-----!-->
        <div class="layui-form-item">
            <label class="layui-form-label">门店名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required" placeholder="请输入门店名称" value="{$row.name|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">门店详细地址(不含省市区)</label>
            <div class="layui-input-block">
                <input type="text" name="address" class="layui-input" lay-verify="required" placeholder="请输入门店门店详细地址" value="{$row.address|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否主店</label>
            <div class="layui-input-block">
                <input type="radio" name="is_main" value="1" lay-filter="demo-radio-filter" title="是"  {if $row.is_main eq 1}checked{/if}>
                <input type="radio" name="is_main" value="0" title="否" lay-filter="demo-radio-filter" {if $row.is_main eq 0}checked{/if} >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">基站类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" title="自营基站" lay-filter="demo-radio-filter" {if $row.type eq 1}checked{/if}>
                <input type="radio" name="type" value="2" lay-filter="demo-radio-filter" title="加盟基站" {if $row.type eq 2}checked{/if}>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息">{$row.remark|default=''}</textarea>
            </div>
        </div>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<!--引入省市区文件-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    layui.use(['form'],function(){
        var form = layui.form;
        // 监听省变化
        form.on('select(province)',function(data){
            console.log('province:'+data.value);
            // 联动市
            $.ajax({
                url: "{:url('jizhan.store/getCity')}?format=html&provinceId="+data.value,
                method: 'GET',
                data: {},
                success: function(response) {
                    $("#city").get(0).options.length=0;
                    $('#city').append(response);
                    form.render();//没有写这个，操作后没有效果
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
        form.on('select(city)',function(data){
            console.log('city:'+data.value);
            // 联动区
            $.ajax({
                url: "{:url('jizhan.store/getArea')}?format=html&cityId="+data.value,
                method: 'GET',
                data: {},
                success: function(response) {
                    $("#district").get(0).options.length=0;
                    $('#district').append(response);
                    form.render();//没有写这个，操作后没有效果
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });

        // 联动市
        $.ajax({
            url: "{:url('jizhan.store/getCity')}?format=html&provinceId=0",
            method: 'GET',
            data: {},
            success: function(response) {
                $("#city").get(0).options.length=0;
                $('#city').append(response);
                form.render();//没有写这个，操作后没有效果
            },
            error: function(error) {
                console.log(error);
            }
        });
        // 联动区
        $.ajax({
            url: "{:url('jizhan.store/getArea')}?format=html&cityId=0",
            method: 'GET',
            data: {},
            success: function(response) {
                $("#district").get(0).options.length=0;
                $('#district').append(response);
                form.render();//没有写这个，操作后没有效果
            },
            error: function(error) {
                console.log(error);
            }
        });
    })
</script>